<!DOCTYPE html>
<html>
<head>
	<title>mouse</title>
	<meta charset="utf-8" />
	<style type="text/css">
		#wrap{
			position: relative;
			top:100px;
			left: 100px;
		}
		#client{
			position: absolute;
			z-index: 10;
			top: 0px;
			left: 0px;
			width: 100px;
			height: 100px;
			background: #00f;
		}
	</style>
</head>
<body>

<div id="wrap">
	<div id='client'></div>
</div>
	

<script type="text/javascript">
	// event是一个声明了全局变量的一个对象，在chrome和IE下，可以随意访问
	// Firefox下是没有event这个对象的！！
	// 在IE8，chrome下，是有event这个对象的！

	// 鼠标点击位置坐标

	// 相对于屏幕
	function getMousePosS(event) {
        var e = event || window.event;
        console.log(e)
        return {'x':e.screenX,'y':screenY}
    }
    // console.log(getMousePosS(event))

    // 相对浏览器窗口
    function getMousePosC(event) {
        var e = event || window.event;
        return {'x':e.clientX,'y':clientY}
    }

    // 相对文档
	function getMousePosP(event) {
	    var e = event || window.event;
	    // console.log(event)
	    var scrollX = document.documentElement.scrollLeft || document.body.scrollLeft;
	    var scrollY = document.documentElement.scrollTop || document.body.scrollTop;
	    var x = e.pageX || e.clientX + scrollX;
	    var y = e.pageY || e.clientY + scrollY;
	    //alert('x: ' + x + '\ny: ' + y);
	    var xy = { 'x': x, 'y': y }
	    return xy;
	    // console.log(xy)
	}

	var id = document.getElementById('client')
	var boxx = id.offsetWidth
	var boxy = id.offsetHeight
	console.log(window.innerHeight)
	var winH = window.innerHeight
	var winW = window.innerwidth
	console.log(winH*0.2,winH*0.8)
	// console.log(document.body.clientHeight)
	// console.log(document.body.offsetHeight)
	var timeStampArr = []
	document.addEventListener('mousemove', function(e){
		// id.style.top = e.clientY - boxx/2 + 'px'
		// id.style.left = e.clientX - boxy/2 + 'px'

		// mouse移动-box固定位置移动
		// id.style.top = e.clientY * 0.1 + 'px'
		// id.style.left = e.clientX * 0.2 + 'px'

		// console.log(id.style.top)
		// var len = id.style.top.length
		// var miny =  id.style.top.substr(0,len-2)
		// console.log(miny)
		// if ( miny < 10) {
		// 	id.style.top = '100px'
		// }else{
		// 	id.style.top = e.clientX * 0.1 + 'px'
		// }


		// console.log(e.timeStamp)
		timeStampArr.push(e.timeStamp)
		// console.log(timeStampArr)
		// console.log(new Date(timeStampArr[timeStampArr.length - 1]))
		timeD = timeStampArr[timeStampArr.length - 1] - timeStampArr[timeStampArr.length - 2]
		console.log(timeD)
	})
	// console.log()

</script>

</body>
</html>